﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.js"></script>
    <link href="../css/bootstrap-slider.min.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap-slider.min.js"></script>
</head>
<body>
    <style>
        #volumeSlider .slider-selection {
            background: #bababa;
        }
    </style>
    <div class="container">
        <p>../content/audio/海阔天空.mp3</p>
        <button class="btn btn-primary" id="playBtn">
            <i class="glyphicon glyphicon-play"></i>
        </button>
        <button class="btn btn-info" id="mutedBtn">
            <i class="glyphicon glyphicon-volume-down"></i>
        </button>
        <div class="form-group">
            <label class="control-label">音量：</label>
            <input class="form-control" id="volume" data-slider-id="volumeSlider"
                   data-slider-min="0" data-slider-max="100" data-slider-step="1" />
        </div>
        <div class="form-group">
            <label class="control-label">进度：</label>
            <input class="form-control" id="timeBtn" data-slider-id="volumeSlider"
                   data-slider-min="0" data-slider-step="0.01" />
        </div>
        <div class="form-group">
            <label class="control-label">缓存：</label>
            <input class="form-control" id="bufferBtn" data-slider-id="volumeSlider"
                   data-slider-min="0" data-slider-step="0.01" />
        </div>
    </div>
    <audio id="myAudio"></audio>
    <script>
        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        var currentFile = '../content/audio/海阔天空.mp3';
        //判断浏览器是否支持audio
        if (!window.HTMLAudioElement) {
            alert('您的浏览器不支持audio标签');
        } else {
            var myAudio = document.getElementById('myAudio');
            myAudio.autoplay = false;
            myAudio.preload = false;
            //播放/暂停按钮
            $('#playBtn').click(function () {
                var icon = $(this).find('i');
                if (myAudio.src.length <= 0) {
                    myAudio.src = currentFile;
                }
                if (myAudio.paused) {
                    myAudio.play();
                    icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
                } else {
                    myAudio.pause();
                    icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
                }
            });
            //静音按钮
            $('#mutedBtn').click(function () {
                var icon = $(this).find('i');
                icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');
                myAudio.muted = !myAudio.muted;
            });
            //音量按钮
            $('#volume').slider({
                value: myAudio.volume * 100
            }).on('change', function (e) {
                var value = e.value.newValue / 100;
                myAudio.volume = value;
            });
            //播放进度按钮
            $('#timeBtn').slider({
                value: 0,
                tooltip: 'always',
                formatter: function (value) {
                    var date = new Date(0, 0, 0, 0, 0, value);
                    return '当前时间：' + date.Format('mm:ss');
                }
            }).on('change', function (e) {
                var value = e.value.newValue;
                myAudio.currentTime = value;
                myAudio.play();
            });
            //缓存进度按钮
            $('#bufferBtn').slider({
                value: 0,
                tooltip: 'always',
                formatter: function (value) {
                    var date = new Date(0, 0, 0, 0, 0, value);
                    return '缓存位置：' + date.Format('mm:ss');
                }
            });
            //进入可播放状态
            myAudio.oncanplay = function () {
                console.info('进入可播放状态,音频总长度:' + myAudio.duration);
            }
            myAudio.onplay = function () {
                console.info('开始播放：' + myAudio.currentTime);
            }
            myAudio.onpause = function () {
                console.info('暂停播放：' + myAudio.currentTime);
            }
            //当媒介播放的位置发生改变，也就是currentTime发生改变
            myAudio.ontimeupdate = function (e) {
                //修改进度按钮
                $('#timeBtn').slider('setValue', myAudio.currentTime);
            }
            //媒介长度发生改变时，触发
            myAudio.ondurationchange = function () { }
            //当媒介数据已加载时运行的脚本。
            myAudio.onloadeddata = function () { };
            //当元数据（比如分辨率和时长）被加载时运行的脚本
            myAudio.onloadedmetadata = function () {
                console.info('onloadedmetadata');
                $('#timeBtn').slider('setAttribute', 'max', myAudio.duration);
                $('#bufferBtn').slider('setAttribute', 'max', myAudio.duration);
            }
            /*
            * onloadedmetadata事件和onsuspend事件触发顺序是不一定的，
            * 但是在触发onloadedmetadata事件之前 myAudio.duration总是为NaN
            * 所以要监视缓存情况，在onloadedmetadata事件中注册onsuspend事件
            * 或者在onsuspend事件中也设置当前进度的最大值
            */
            //在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
            myAudio.onsuspend = function () {
                var timeRange = myAudio.buffered;
                // console.info('onsuspend:' + myAudio.duration);
                if (timeRange.length > 0 && myAudio.duration > 0) {
                    // console.info('缓存完成：' + timeRange.end(0));
                    $('#bufferBtn').slider('setAttribute', 'max', myAudio.duration);
                    //修改缓存按钮
                    var timeRange = myAudio.buffered;
                    $('#bufferBtn').slider('setValue', timeRange.end(0));
                }
            }

        }
    </script>
</body>
</html>
